<script setup>
import {defineProps, defineAsyncComponent, computed, watch} from 'vue';

const props = defineProps({
  example: Object
});

// 动态加载示例组件
let DynamicComponent = null;

watch(() => props.example.title, () => {
  DynamicComponent = defineAsyncComponent(() =>
      import(`../examples/${props.example.title}/index.vue`)
  );
}, {
  immediate: true,
})
</script>

<template>
  <div class="view-container">
    <h2 class="example-title">{{ example.title }}</h2>
    <div class="scene-container">
      <Suspense>
        <template #default>
          <DynamicComponent/>
        </template>
        <template #fallback>
          加载中...
        </template>
      </Suspense>
    </div>

    <div class="description">
      <p>{{ example.description }}</p>
    </div>
  </div>
</template>

<style>
.view-container {
  height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
  width: calc(100vw - 300px);
  overflow: hidden;
}
</style>